<template>
	<div class="">
		<el-upload ref="shsUpload" action="#" :http-request="mystyleUpload" :on-remove="handleRemove"
			:before-upload="beforeUpload" :on-exceed="handledExceed" :show-file-list="false" name="shsuploadfile"
			:file-list="imageList" :disabled="disable" :multiple="true" :limit="maxUploadCount" :on-error="handleError"
			:on-success="handleSuccess" :on-progress="handleProgress"
			accept=".jpg,.jpeg,.png,.gif,.webp,.mp4,.avi,.mov,JPG,JPEG,PNG,GIF,WEBP,MP4,AVI,MOV">
			<el-button size="small" :disabled="disable" type="primary">
				上传文件
			</el-button>
			<div slot="tip" class="el-upload__tip">
				支持图片和视频格式
			</div>
		</el-upload>
		<div class="marginT5 " style="font-size: 12px;" v-if="percent">
			<span>进度{{percent}}%</span>
			<span v-if="isddxc" class="marginL10 marginT5 cursorPointer shs-cancle" @click="handledCancle">X</span>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		upload,
		uploadVideo
	} from '@/api/upload'
	import {
		imageNowIP
	} from "@/utils/config"
	import {
		deepClone
	} from "@/utils/base"
	import {
		uniqueE
	} from "@/utils/common"
	export default {
		name: 'Upload',
		model: {
			prop: 'value',
			event: 'input',
		},
		props: {
			value: {
				type: Array,
				required: true,
				default: () => []
			},
			disable: {
				type: Boolean,
				default: false,
			},
			maxUploadCount: {
				type: Number | String,
				default: 2,
			}
		},
		data() {
			const videoLimitSizeMb=450;
			const imageLimitSizeMb=2;
			const videoLimitSize = videoLimitSizeMb * 1024 * 1024;
			const imageLimitSize = imageLimitSizeMb * 1024 * 1024;
			return {
				percent: 0,
				videoLimitSizeMb,
				imageLimitSizeMb,
				videoLimitSize, //视频大小限制
				imageLimitSize, //图片大小限制
				isddxc: false, //是否支持断点续传 未实现
				// 上传地址
				imageNowIP: imageNowIP,
				doUpload: imageNowIP + '/upload_file_image',
				uploadListReady: [],
				imagesArray:["jpg","jpeg","png","gif","webp","mp4","avi","mov","JPG","JPEG","PNG","GIF","WEBP","MP4","AVI","MOV"],
				
			};
		},
		computed: {
			imageList() {
				return this.value;
			}
		},
		watch: {},
		methods: {
			uniqueE,
			//超出限制文件个数
			handledExceed(files, fileList) {
				this.$message.error(`上传文件不能超过 ${this.maxUploadCount}个!`);
			},
			// 上传前
			beforeUpload(file) {
				if (this.imagesArray.indexOf(file.type.split("/")[1]) == -1) {
					this.$message.error("格式错误")
					return false;
				}
				if (file.type.includes("image")) {
					const limitFileSize = file.size < this.imageLimitSize;
					if (!limitFileSize) {
						this.$message.error(`图片大小不能超过 ${this.imageLimitSizeMb}MB!`);
					}
					return limitFileSize;
				} else if (file.type.includes("video")) {
					const limitFileSize = file.size < this.videoLimitSize;
					if (!limitFileSize) {
						this.$message.error(`视频大小不能超过 ${this.videoLimitSizeMb}MB!`);
					}
					return limitFileSize;
				} else {
					this.$message.error("图片格式错误");
					return false;
				}

			},
			// 手动删除文件钩子
			handleRemove(_file, fileList) {
				// this.processFileList(fileList);
			},
			// 自定义处理filelist
			processFileList(fileList) {
				// this.triggerChange(fileList);
			},
			triggerChange(fileList) {
				this.$emit('input', fileList);
			},
			handleSuccess(res, file, fileList) {

			},
			handleError(err) {
				try {
					this.$message.error("文件上传错误" + (err.message || err.msg));
				} catch (e) {}
			},
			handleProgress(event, file, fileList) {
				this.percent = event.percent
			},
			/**
			 * 中断上传
			 */
			handledCancle() {},
			// 自定义上传方法
			async mystyleUpload(option) {
				let _this = this;
				let formData = new FormData();
				formData.append('shsuploadfile', option.file);

				let baseUrl = option.file.type.includes("image") ?
					"/upload_file_image" :
					"/upload_file_video";
				let url = this.imageNowIP + baseUrl;

				try {
					axios({
						url,
						method: 'POST',
						data: formData,
						onUploadProgress: (progressEvent) => {
							let percent = Math.floor((progressEvent.loaded / progressEvent.total) *
								100);
							if (option && typeof option.onProgress === 'function') {
								option.onProgress({
									percent
								});
							}
						}
					}).then(res => {
						if (res.data.code === 200) {
							try {
								res.data.uniqueID = uniqueE(8, 16);
								let value = [...this.imageList, res.data];
								_this.triggerChange(value);
							} catch (e) {
								console.error("处理成功响应时发生错误", e);
								option.onError(e);
							}
						} else {
							option.onError(res.data);
						}
					}).catch(err => {
						option.onError(err);
					})
				} catch (error) {
					// 捕获axios请求过程中的任何错误
					console.error("上传文件时发生错误", error);
					option.onError(error);
				}
			},

		},
	};
</script>
<style scoped>
	.shs-cancle {
		background-color: red;
		width: 20vw;
		height: 20px;
		line-height: 20px;
		display: inline-block;
		text-align: center;
	}
</style>